import React, { useState } from 'react'
import { RegApi } from "@/request/api"
import logo from "@/assets/images/logo.png"
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import { useNavigate } from 'react-router-dom';
import "./Reg.less"
import { useToast } from "@/utils/toast"
export default function Reg() {
    let toast = useToast()
    let navigate = useNavigate()
    let [username, setUserName] = useState("")
    let [password, setPassWord] = useState("wolfcode123")

    const Reg = async () => {

        let phonenum = function () {
            let p = /^1[3-9]\d{9}$/
            if (p.test(username)) {
                return true //正确
            } else {
                return false //错误
            }
        }
        if (phonenum()) {
            //手机号格式正确，可以注册
            let res = await RegApi({
                nickName: "",
                phone: username,
                password
            })
            console.log(res);
            setPassWord("")
            setUserName("")
            if (res.errCode === 0) {
                //dispatch(修改isshow)
                toast("success", "注册成功")
                //存一下token
                navigate("/login")
            }
        } else {
            //手机号格式错误
            console.log("错误");
            toast("error", "注册失败，请重新填写手机号")
            setPassWord("")
            setUserName("")
        }
    }
    return (
        <div className='reg'>
            <img src={logo} alt="" />
            <p className='loginpage'>Register Page</p>
            <div className='login-box'>
                <TextField onChange={(v) => {
                    setUserName(v.target.value)
                }} className='TextField' id="outlined-basic" label="请输入手机号" variant="outlined" />
                <TextField onChange={(v) => {
                    setPassWord(v.target.value)
                }} className='TextField' type="password" id="outlined-basic" label="请输入密码" variant="outlined" />
                <Button className='btn' variant="contained" onClick={Reg} >立即注册</Button>
                <div className='gowhere'>
                    <div className='qwzc' onClick={() => {
                        navigate("/login")
                    }}>返回登录</div>
                </div>
                <div className='copy'>Copyright</div>
            </div>
        </div>
    )
}
